import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Form, Upload, Button, Select } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import _ from 'loadsh'
import { Line, Cell } from '@components/ApprovePre/Approve'
import { getUploadProps } from '@js/tool'
import Dictionary from '@js/dictionary'

const { Item } = Form
const { Option } = Select

export default class StepTwoInput extends Component {
  state = {
    keyTitleMap: {},
    fileList: [],
    sealTypes: []
  }

  initKeyTitleMap () {
    const map = {}
    const list = _.get(this.props.instance || {}, 'currentStep.vars', [])
    list.forEach(li => {
      map[li.key] = li.title
    })
    this.setState({
      keyTitleMap: map
    })
  }

  componentDidUpdate (prev) {
    if (this.props.instance !== prev.instance) {
      this.initKeyTitleMap()
    }
  }

  componentDidMount () {
    this.initKeyTitleMap()
    const d = new Dictionary()
    d.init('文书盖章类型')
      .then(res => {
        this.setState({
          sealTypes: d.getList('文书盖章类型')
        })
      })
      .catch(e => console.error(e))
  }

  render () {
    const { keyTitleMap } = this.state
    return (
      <div>
        <Line>
          <Cell>
            <Item name={['vars', 'document_sealtype']} labelCol={{ flex: '130px' }} label={keyTitleMap.document_sealtype} rules={[{ required: true, message: `${keyTitleMap.document_sealtype}不能为空` }]}>
              <Select placeholder='请选择'>
                {this.state.sealTypes.map((li, i) => <Option key={i} value={li.value}>{li.title}</Option>)}
              </Select>
            </Item>
          </Cell>
        </Line>
        <Line>
          <Cell style={{ width: '65%' }}>
            <Item labelCol={{ flex: '130px' }} name='file' label={keyTitleMap.other_fileid}>
              <Upload {...getUploadProps.call(this, this.props.formRef)}>
                <Button>
                  <UploadOutlined /> 上传文件
                </Button>
              </Upload>
            </Item>
          </Cell>
        </Line>
      </div>
    )
  }
}

StepTwoInput.proptypes = {
  caseDetail: PropTypes.object,
  userInfo: PropTypes.object,
  instance: PropTypes.object,
  formRef: PropTypes.object,
  docTemplates: PropTypes.array,
  docTemplateMap: PropTypes.object
}

StepTwoInput.defaultProps = {
  caseDetail: {},
  userInfo: {},
  instance: {},
  formRef: {},
  docTemplates: [],
  docTemplateMap: {}
}
